<template>
  <h5>
    购物车(<span>{{ num }}</span
    >)
  </h5>
  <i>编辑</i>

  <!-- 如果购物车是空的 -->
  <div v-if="num == 0">
    <van-empty description="您的购物车是空的" />
  </div>

  <!-- 如果购物车不是空的  -->
  <ul v-else class="shopping-list">
    <div><van-checkbox v-model="checked"> 平台配送</van-checkbox></div>
    <li v-for="(item, index) in shoppingList.resArr" :key="item.cartId">
      <van-checkbox v-model="checked" />
      <!-- <van-card
        :num="item.count"
        :price="item.productPrice"
        :desc="item.productName"
        :thumb="item.productImg"
      /> -->
      <div class="shopBox">
        <img :src="item.productImg" alt="" />
        <div>
          <p>{{ item.productName }}</p>
          <span>{{ item.standard }};</span>
          <div>
            <span>￥{{ item.productPrice }}.00</span>
            <div>
              <span class="span1" @click="delCount(index)">-</span>
              <span>{{ item.count }}</span>
              <span class="span1" @click="addCount(index)">+</span>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>

  <van-submit-bar
    :price="0"
    button-text="提交订单"
    @submit="onSubmit"
    button-color="rgb(241,105,17)"
  >
    <van-checkbox v-model="checked">全选</van-checkbox>
  </van-submit-bar>
</template>

<script>
import { shoppingApi } from "../../../utils/api";
import { onMounted, ref } from "vue";
export default {
  setup() {
    const num = ref(1);
    const shoppingList = ref({});
    onMounted(() => {
      getshoppingList();
    });
    const delCount = (index) => {
      // console.log(shoppingList.value.resArr[0].count);
      if (shoppingList.value.resArr[index].count > 1) {
        shoppingList.value.resArr[index].count--;
      }
    };
    const addCount = (index) => {
      // console.log(shoppingList.value.resArr[0].count);
      shoppingList.value.resArr[index].count++;
    };
    async function getshoppingList() {
      const token = localStorage.getItem("token");
      let { result } = await shoppingApi({ token: token });
      shoppingList.value = result;
      console.log(shoppingList.value);
    }
    return {
      num,
      checked: 0,
      getshoppingList,
      shoppingList,
      delCount,
      addCount,
    };
  },
};
</script>

<style lang="less" scoped>
h5 {
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
}
i {
  display: block;
  font-size: 14px;
  color: orange;
  float: right;
  margin: 8px 10px;
}
.van-submit-bar {
  position: fixed !important;
  bottom: 51px !important;
  left: 0 !important;
  border-top: 1px solid #ccc;
  border-radius: 0;
}
.van-empty {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.van-checkbox {
  margin-left: 10px;
}
.shopping-list {
  margin-top: 30px;
  background-color: #fff;
  > div:first-child {
    width: 100%;
    border-bottom: 1px solid #ccc;
    height: 40px;
    font-size: 14px;
    display: flex;
    align-items: center;
  }
  > li {
    display: flex;
    background-color: rgb(250, 250, 250);
    width: 100%;
    // > .van-card {
    //   width: 90%;
    //   flex: 1;
    .shopBox {
      padding: 6px 0;
      background-color: #fff;
      width: 90%;
      margin-left: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 80px;
        height: 80px;
        margin-right: 6px;
      }
      > div {
        font-size: 16px;
        > p {
          font-size: 14px;
        }
        > span {
          display: block;
          font-size: 12px;
          color: #999;
          padding: 7px 0;
        }
        > div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-right: 15px;
          > span {
            color: crimson;
          }
          > div {
            display: flex;
            > .span1 {
              width: 20px;
              height: 20px;
              text-align: center;
              background-color: #fff;
              border-radius: 50%;
              border: 1px solid #ccc;
            }
            span {
              margin: 0 3px;
            }
          }
        }
      }
    }
  }
}
</style>
